<template>
  <div id="app">
    <h4>欢迎光临_vue开发的收银系统_水果店</h4>
    <table border="1" width="600" height="100">
      <caption>
        苹果10￥/斤，折扣/《8折》
      </caption>
      <tbody>
        <tr>
          <td>
            <span>请输入你要购买的斤数</span>
            <input type="number" placeholder="请输入斤数" v-model="weight" />
          </td>
        </tr>
        <tr>
          <td>
            <button @click="payMoney">结账买单</button>
          </td>
        </tr>
      </tbody>
    </table>
    <p>
      结账单：总价:{{ total }}元 折后价:{{ price }}元 省了:{{total-price  }}元
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weight: '',
      total:'',
      price:'',
    }
  },
  methods: {
    payMoney(){
      this.total=this.weight*10,
      this.price=this.total*0.8

    }
  },
 
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
div {
  text-align: center;
}
table {
  margin: 0 auto;
}
</style>
